<template>
  <div class="container">
    <div>
      <work-flow-submit-com
        ref="submitCom"
        :busiTypeId="busiTypeId"
        :busiOrgId="curOrgId"
        :busiCorpId="curCorpId"
        :busiUserId="curUserId"
        :busiUserName="curUserName"
        :busiId="record.id"
        :busiTitle="record.title"
        :relateData="busiRelateData"
        @submitParamCallBack="doSubmit"
      ></work-flow-submit-com>
    </div>

    <div>
      <div>
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标题" prop="title">
                <el-input v-model="record.title" placeholder="标题"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="success" @click="createSave('dataForm', 'save')">保存</el-button>
        <el-button size="small" type="success" @click="createSave('dataForm', 'submit')">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { closeTab } from '@/utils/index'
  import { workFlowSubmitCom } from '@/views/workFlowManage/busiWorkFlowComponents'

  export default {
    name: 'wfBusiDemoDetail',
    data() {
      return {
        busiTypeId: 'wfBusiDemo',
        curUserId: this.$store.state.user.userid,
        curUserName: this.$store.state.user.name,
        curOrgId: this.$store.state.user.orgId,
        curCorpId: this.$store.state.user.corpId,
        busiRelateData: [{
          'relateKey': 'type',
          'relateValue': '0'
        }],
        record: {
          id: '',
          title: '',
          busiUserId: '',
          busiOrgId: ''
        },
        recordRules: {
          title: [
            { message: '标题不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 256, message: '最大长度为 256 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    props: ['componentCustomProps'],
    components: {
      workFlowSubmitCom
    },
    created() {
      if (this.componentCustomProps) {
        this.currentComParams = this.componentCustomProps
      } else {
        this.currentComParams = this.$route.query
      }
      this.initPage()
    },
    watch: {
      componentCustomProps() { // 普通的watch监听通的watch监听
        this.initPage()
      }
    },
    methods: {
      initPage() {
        if (this.currentComParams.openType === 'edit') {
          this.record.id = this.currentComParams.busiId
          this.fetchData()
        }
      },
      fetchData() {
        let queryArgs = {
          condition: [
            {
              property: 'id',
              value: '',
              type: 'EQ'
            }
          ]
        }
        queryArgs.condition[0].value = this.record.id
        this.$store.dispatch('WfBusiDemoSelect', queryArgs).then(res => {
          this.loading = false
          this.record = res.data.records[0]
        }).catch((err) => {
          console.log(err)
        })
      },
      createSave(formName, type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRecord(type)
          } else {
            this.$message({
              type: 'danger',
              message: '数据验证失败!'
            })
            console.log('error validate!!')
            return false
          }
        })
      },
      saveRecord(type) {
        if (!this.record.id) {
          this.record.busiUserId = this.curUserId
          this.record.busiOrgId = this.curOrgId

          // 插入
          this.$store.dispatch('WfBusiDemoInsert', this.record).then(res => {
            this.saveCallBack(type, res)
          }).catch((err) => {
            console.log(err)
            this.saveErrorCallBack(type, err)
          })
        } else {
          // 更新
          this.$store.dispatch('WfBusiDemoUpdateById', this.record).then(res => {
            this.saveCallBack(type, res)
          }).catch((err) => {
            console.log(err)
            this.saveErrorCallBack(type, err)
          })
        }
      },
      saveErrorCallBack(type, err) {
        let msg = '服务器连接异常，保存失败!'
        if (type === 'submit') {
          msg = '服务器连接异常，提交失败!'
        }
        this.$message({
          type: 'danger',
          message: msg
        })
      },
      saveCallBack(type, res) {
        if (type === 'submit') {
          if (res && res.success) {
            this.record = res.data
            this.doSubmitBefore()
          } else {
            this.$message({
              type: 'danger',
              message: '提交时，保存业务数据失败!' + res.message
            })
          }
        } else {
          if (res && res.success) {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.record = res.data
          } else {
            this.$message({
              type: 'danger',
              message: '保存失败!' + res.message
            })
          }
        }
      },
      doSubmitBefore() {
        //
        this.$refs.submitCom.doSubmitInit()
      },
      doSubmit(input) {
        // console.log('input', input)
        this.$store.dispatch('WfBusiDemoSubmit', input).then(res => {
          if (res && res.success) {
            this.closeComponent()
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      closeComponent() {
        try {
          this.$emit('closeComponent')
        } catch (e) {
          //
        }

        // tab打开方式关闭
        try {
          closeTab(this.$route)
        } catch (e) {
          //
        }
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
